<template>
  <div class="shop">
    <div class="head">
      <span class="head-title">会员购</span>
      <div class="head-scroll">
        <van-button round>
          <van-swipe vertical class="notice-swipe" :autoplay="4000" :touchable="false" :show-indicators="false">
            <van-swipe-item v-for="item in textList" :key="item.id">{{ item.text }}</van-swipe-item>
          </van-swipe>
        </van-button>
      </div>
      <div class="head-icon">
        <van-icon name="shopping-cart-o" />
        <van-icon name="user-circle-o" />
      </div>
    </div>
    <div class="search-line">

      <van-sticky :offset-top="0">
        <van-search shape="round" placeholder="请输入搜索关键词" class="shop-search" show-action>
          <template #left>
            <div class="search-left">
              <van-icon name="notes-o" />
              <span>签到有礼</span>
            </div>
          </template>
          <template #action>
            <div class="search-right">
              <van-icon name="vip-card-o" />
            </div>
          </template>
        </van-search>
      </van-sticky>


    </div>

    <div class="scroll">
      <div class="scroll-icon">
        <div class="scroll-item" v-for="item in swip.slipShow" :key="item.id">
          <img :src="item.img" alt="">
          <span>{{ item.text }}</span>
        </div>
      </div>

    </div>
    <div class="swipe-content">
      <van-swipe :loop="false">
        <van-swipe-item>
          <div class="left">
            <div class="left-son" v-for="item in swip.showImg1" :key="item.id">
              <span>{{ item.text }}</span>
              <img :src="item.img" alt="" class="left">
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="left">
            <div class="left-son" v-for="item in swip.showImg2" :key="item.id">
              <span>{{ item.text }}</span>
              <img :src="item.img" alt="" class="left">
            </div>
          </div>
        </van-swipe-item>

      </van-swipe>
    </div>
    <div class="waterfall">
      <div class="waterfall-son" v-for="item in state.waterfall" :key="item.id" @click="toshow(item.id)">
        <img :src="item.img1" alt="">
        <div class="text">
          <div class="name">{{ item.name }}</div>
          <div class="label">
            <span class="grey">商家</span>
            <span class="pink">满额权益</span>
          </div>
          <div class="price">
            <span>￥{{ item.price }}</span>
            <van-icon name="like-o" />
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import useCounter from '../../store/counter';
import axios from '../../api/index.js'

const swip = useCounter()


const router = useRouter()
const textList = reactive([
  { text: 'CHE手办原型创作大赛>', id: 0 },
  { text: '官方直营 · 正品保障', id: 1 }

])
const state = reactive({
  waterfall: {}
})
onBeforeMount(
  async () => {
    const res = await axios.post('/shop')
    state.waterfall = res.data
  }
)

const toshow = (index) => {
  router.push({ path: '/show', query: { id: index } })
}
</script>

<style lang="less" scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
  color: #fff;
}

.van-button {
  height: 40px;
  line-height: 40px;
  background: transparent;
  border: transparent;
}

.head {
  background: #ff279aec;
  padding-top: 0.3rem;
  box-sizing: border-box;
  height: 1.4rem;
  display: flex;
  align-items: center;
  color: #fff;

  .head-title {
    font-size: 0.42rem;
    margin: 0.2rem;
  }

  .head-scroll {
    font-size: 0.3rem;
    flex: 1;
  }

  .head-icon {
    width: 3rem;
    margin-right: 0.2rem;
    display: flex;
    justify-content: space-around;
    color: #fff;
  }
}

.search-line {
  height: 1rem;

  .search-left {
    background: #eee;
    width: 1.4rem;
    height: 0.8rem;
    border-radius: 3px;
    margin-right: 0.1rem;
    position: relative;

    span {
      width: 0.8rem;
      height: 0.7rem;
      font-size: 0.3rem;
      position: absolute;
      top: 0.1rem;
    }
  }

  .search-right {
    background: #eee;
    width: 0.8rem;
    height: 0.6rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
  }
}

.scroll {
  overflow: hidden;
  position: relative;
  height: 1.6rem;
  width: 100%;

  .scroll-icon {
    overflow-x: scroll;
    height: 1.6rem;
    display: flex;
    position: relative;
    padding: 0.2rem 0;

    .scroll-item {
      margin: 0 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        border-radius: 50%;
        width: 0.8rem;
        height: 0.8rem;
      }

      span {
        padding: 0.15rem 0 0 0;
        white-space: nowrap;
        font-size: 0.3rem;
      }
    }
  }
}

.swipe-content {
  background: #f1f1f1;
}

.van-swipe-item {
  height: 2.4rem;
  font-size: 0.3rem;
  text-align: center;

  .left {
    height: 100%;
    display: flex;
    font-size: 0.4rem;

    .left-son {
      flex: 1;
      position: relative;
      margin: 0 0.05rem;

      img {
        width: 100%;
      }

      span {
        position: absolute;
        top: 0.2rem;
        left: 0.1rem;
        font-weight: bold;
      }
    }
  }

  .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .right-son {
      display: flex;
      flex-direction: column;
      padding: 0 0.3rem;

      img {
        width: 1.3rem;
      }
    }
  }
}

.waterfall {
  background: #f1f1f1;
  column-count: 2;
  column-gap: 0.1px;
  overflow: scroll;
  padding: 0.2rem 0 1.2rem;
  box-sizing: border-box;

  .waterfall-son {
    background: #fff;
    margin: 0.5rem 0.15rem;
    border-radius: 0.2rem;

    img {
      border-radius: 0.2rem 0.2rem 0 0;
      width: 100%;
    }

    .text {
      padding: 0.1rem;

      .name {
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.4rem;
      }

      .price {
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          font-size: 0.5rem;
          font-weight: 600;
          line-height: 0.4rem;
        }

        .van-icon {
          font-size: 0.4rem;
          color: #ccc;
        }
      }

      .label {
        font-size: 0.3rem;
        margin: 0.2rem 0;
        display: flex;
        line-height: 0.5rem;

        .grey {
          background: #eee;
          color: #666;
          padding: 0 0.1rem;
          margin-right: 0.1rem;
        }

        .pink {
          background: #ff279a58;
          padding: 0 0.1rem;
          color: #fe1d95be;
        }
      }
    }
  }
}
</style>